<!--
 * @Author: your name
 * @Date: 2021-05-08 10:06:44
 * @LastEditTime: 2021-06-29 15:51:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dolphin-data-center-front-end\src\pages\components\projectDetailTabs\tab4.vue
-->

<template>
  <div>
    <div v-for="(value, key) in basicInfoConfig" :key="key">
      <h3 style="margin: 20px 0">
        {{
                    [
                        "基础信息",
                        "证件银行卡",
                        "附件信息",
                        "教育工作",
                        "联系人",
                    ][
                        ["type1", "type2", "type3", "type4", "type5"].findIndex(
                            (item) => item == key
                        )
                    ]
                }}
      </h3>
      <a-table v-if="
                    ['type1', 'type2', 'type3', 'type4', 'type5'].includes(key)
                " :columns="columns" :data-source="basicInfoConfig[key] || []" :pagination="false" rowKey="id">
        <div slot="showIf" slot-scope="text, record, index">
          <a-checkbox data-index="1" data-checked1="record.showIf" :default-checked="record.showIf" @change="
                            onShowChange($event, key, index, record, 'showIf')
                        " />
        </div>
        <div slot="requiredIf" slot-scope="text, record, index">
          <a-checkbox :default-checked="record.requiredIf" @change="
                            onShowChange(
                                $event,
                                key,
                                index,
                                record,
                                'requiredIf'
                            )
                        " />
        </div>
        <div slot="editableIf" slot-scope="text, record, index">
          <a-checkbox :default-checked="record.editableIf" @change="
                            onShowChange(
                                $event,
                                key,
                                index,
                                record,
                                'editableIf'
                            )
                        " />
        </div>
      </a-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "tab3",
  props: ["basicInfoConfig"],
  data () {
    return {
      columns: [
        {
          title: "列名",
          width: '40%',
          dataIndex: "fieldName",
        },
        {
          title: "是否显示",
          dataIndex: "showIf",
          width: '20%',
          scopedSlots: { customRender: "showIf" },
        },
        {
          title: "是否必填",
          dataIndex: "requiredIf",
          width: '20%',
          scopedSlots: { customRender: "requiredIf" },
        },
        {
          title: "是否可改",
          dataIndex: "editableIf",
          width: '20%',
          scopedSlots: { customRender: "editableIf" },
        },
      ],
    };
  },
  methods: {
    onShowChange (e, key, index, item, option) {
      this.$emit("checkChange", {
        checked: e.target.checked,
        key,
        index,
        item,
        option,
      });
    },
  },
};
</script>

<style>
</style>
